<template>
  <div class="sign-page">
    <div class="na-bg-img">
        <div class='log-in-back' >
          <div @click="backClick">
            <van-icon name="arrow-left" size="30" color="white"/>
          </div>
        </div>
        <div class="user-info">
          <div><span>请填写相关信息</span></div>
          <div><van-field v-model="email" label="邮箱" placeholder="请输入邮箱" disabled /></div>
          <div><van-field v-model="password" type="password" label="密码" @blur="isLegalPassword" /></div>
          <div><van-field v-model="username" label="用户名" placeholder="请输入用户名" @blur="isLegalUsername"/></div>
          <div class="sex-select" >
            <van-radio-group v-model="sex" style="display:flex">
            <van-radio name="男">男</van-radio><van-radio name="女">女</van-radio>
            </van-radio-group>
          </div>
          <div><van-field v-model="age" type="digit" label="年龄(0-130)"/></div>
          <div class="info-commit" @click="infoCommit"><van-button type="info">提交</van-button></div>
        </div>
        
    </div>
    
    
  </div>
</template>
<script>
import Vue from 'vue';

import axios from 'axios';


import { Icon } from 'vant';
import { Button } from 'vant';
import { Field } from 'vant';
import { Toast } from 'vant';
import { RadioGroup, Radio } from 'vant';

Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Toast);
Vue.use(Field);
Vue.use(Button);
Vue.use(Icon);

import networkPath from '../../network/networkPath'


export default {
  name: "SignPage",
  data() {
    return {
      link: '',
      username: '',
      password: '',
      email: '',
      sex: '男',
      age:''

    }
  },
  methods: {
    backClick(){
      this.$router.back()
      if(this.$store.state.isShow == false){
        this.$store.state.isShow = true
      }
    },
    isLegalPassword(){
      axios.post(`${networkPath.baseURL}/api/user/verify`,`password=${this.password}`).then(res =>{
        Toast({message:'密码提示:'+res.data.message, position: 'top'})
      })
    },
    isLegalUsername(){
      axios.post(`${networkPath.baseURL}/api/user/verify`,`username=${this.username}`).then(res =>{
        Toast({message:'用户名提示'+res.data.message,position: 'top'})
      })
    },
    infoCommit(){
      axios.post(`${networkPath.baseURL}/api/user/register`,
      `username=${this.username}&password=${this.password}&sex=${this.sex=="男"?1:0}&age=${this.age}&email=${this.email}`).then(res =>{
        console.log(res)
        Toast({message:res.data.message, position: 'top'})
        if (res.data.code==209) {
           this.$router.replace({
            path: '/login'
          })
        }
       
      })
    }

  },
  beforeMount(){
    this.link = this.$route.params.link
    console.log(this.link)
    axios.post(`${networkPath.baseURL}/api/user/register/${this.link}`).then(res =>{
      console.log(res)
      if (res.data.code == 16 ) {
        Toast({message:'恭喜邮箱'+res.data.data+res.data.message, position: 'top'})
        setTimeout(() => {
          Toast({message:'请填写相关信息',position: 'top'})
        }, 3000);
        this.email =res.data.data
      }
      else{
        setTimeout(() => {
          this.$router.replace({
           path: '/login'
        })
        }, 1000);
        Toast(res.data.message+'即将跳转至登录界面')
        
      }

    })
    
},
}

</script>

<style scoped lang="less">
.na-bg-img{
  height: 80vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #3e59ec, #b4ddf5);
}
.log-in-back{
  width: 100%;
  height: 44px;
}
.log-in-back div{
  width: 44px;
  position: absolute;
  height: 44px;
  padding-top: 5px;
  padding-left: 0px;

}
.user-info{
  height: 70vh;
  width: 90vw;
  background-color: rgba(255, 255, 255, 0.63);
  text-align: center;
  margin-left: 5vw;
  line-height: 10vh;
}
.user-info div{
  margin: 5px 5px;
  width: 80vw;
}
.info-commit{
  width: 72vw;
  overflow: hidden;
  button{
    margin-left: 5px;
  }
}
</style>